<template>
  <div class="form-container">
    <h2>个人信息提交表单</h2>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="name">姓名:</label>
        <input type="text" id="name" v-model="formData.name" required />
      </div>
      <div class="form-group">
        <label for="email">邮箱:</label>
        <input type="email" id="email" v-model="formData.email" required />
      </div>
      <div class="form-group">
        <label for="adress">地址:</label>
        <el-cascader
          placeholder="请选择地址"
          :options="options"
          :props="props"
          collapse-tags
          :show-all-levels="true"
          separator=">"
          filterable
          clearable
        >
          <template slot-scope="{ node, data }">
            <span>{{ data.label }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </div>
      <div class="form-group">
        <label for="phone">电话号码:</label>
        <input type="tel" id="phone" v-model="formData.phone" required />
      </div>
      <div class="form-group">
        <button type="submit">提交</button>
      </div>
    </form>
  </div>
</template>

<script>

export default {
  name: 'UserInfoForm',
  data () {
    return {
      formData: {
        name: '',
        email: '',
        phone: ''
      },
      props: { multiple: true, checkStrictly: true },
      options: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'chaoyang',
              label: '朝阳区'
            },
            {
              value: 'haidian',
              label: '海淀区'
            }
          ]
        },
        {
          value: 'shanghai',
          label: '上海',
          children: [
            {
              value: 'pudong',
              label: '浦东新区'
            }
          ]
        }
      ],
      methods: {
        submitForm () {
          // 打印表单数据到控制台
          console.log('表单数据:', this.formData)

          // 清空表单
          // this.formData = {
          //   name: '',
          //   email: '',
          //   phone: ''
          // }
        },


      }
    }
  }
}
</script>

<style scoped>
.form-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #45a049;
}
</style>
